<template>
  <intro-view :usage="usage">
    <div ref="page">
      <button @click="showAlert">showAlert</button>
      <br>
      <button @click="showConfirm">showConfirm</button>
      <br>
      <button @click="showCustomConfirm">showCustomConfirm</button>
    </div>
  </intro-view>
</template>

<script>
  import usage from './usage.md'
  export default {
    data() {
      return {
        usage
      }
    },
    methods: {
      showAlert () {
        this.$UiMessageDialog.new({
          onEl: this.$refs['page'],
          title: '选填标题',
          message: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
          callback: (trigger) => {
            console.log('closed', trigger)
          }
        })
      },
      showConfirm () {
        this.$UiMessageDialog.new({
          onEl: this.$refs['page'],
          showCancelBtn: true,
          title: '选填标题',
          message: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
          callback: (trigger) => {
            console.log('closed', trigger)
          }
        })
      },
      showCustomConfirm () {
        this.$UiMessageDialog.new({
          onEl: this.$refs['page'],
          title: '<span style="color: #0f0">选填标题?</span>',
          message: '哈哈哈哈哈<span style="color: #00f">哈哈</span>哈哈哈哈哈哈哈哈哈哈,啦啦啦两岸拉梁啊',
          buttons: [{
            text: '<span>取消</span>',
            class: {'btn-cancel': true}
          }, {
            text: '让我想想',
            color: '#f00',
            disabled: true,
            click: function () {
              console.log('think a moment')
            }
          }, {
            text: '确定',
            class: {'btn-confirm': true},
            click: () => {
              console.log('you click the confirm btn')
            }
          }],
          callback: (trigger) => {
            console.log('closed', trigger)
          }
        })
      }
    }
  }
</script>
